<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>

    <!-- 定义 Vue 挂载的容器，容器中的代码也被称为 “Vue 模板代码” -->
    <div id="root">
        <h1>Hello, {{ message }}</h1>
    </div>

    <script>
        // 阻止 Vue 在启动时在控制台打印生产提示
        Vue.config.productionTip = false

        // 创建 Vue 实例对象
        // Vue 构造函数接收一个配置对象作为参数
        const vm = new Vue({
            // el 用于指定当前 Vue 实例为哪个容器服务，值通常为 CSS 选择器
            el: '#root',
            // data 中用于存储数据，供 el 所指定的容器中使用
            data: {
                message: 'World'
            }
        })
    </script>

</body>
</html>